<template>
	<view>
		<view id="uploadNews">
			<view v-show="newsFlag">
				<view class="uploadNews">
					<!--  上传资讯标题  -->
					<view class="newsTitle">
						<view style="font-size:28rpx;">标题 <text style="color: red">*</text></view>
						<view
							style="position: relative; width: 100%; background-color: #F7F7F7; height: 144rpx; padding: 20rpx; box-sizing: border-box; border-radius: 10rpx;margin: 0 auto; margin-top: 20rpx;">
							<textarea style="width: 94%; height: 100%; position: absolute; font-size:28rpx;;"
								placeholder="请输入" rows="8" cols="18" v-model="news.title" type="text" />
						</view>
					</view>
					<!--  上传资讯内容  -->
					<view class="newsTitle">
						<view style="font-size:28rpx;">具体描述 <text style="color: red">*</text></view>
						<view
							style="position: relative; width:100%; background-color: #F7F7F7; height: 144rpx; padding: 20rpx; box-sizing: border-box; border-radius: 10rpx;margin: 0 auto;margin-top: 20rpx;">
							<textarea style="width: 94%; height:100%; position: absolute; font-size:28rpx;"
								placeholder="请输入" rows="8" cols="18" v-model="news.content" type="text" />
						</view>
					</view>
					<!--  添加标签  -->
					<view class="addTag" @click="selTag(0)">
						<view style="display: flex; align-items: center; justify-content: space-between;">
							<view class="addText">添加标签 <text style="color: red">*</text></view>
							<view style="color: #A1A0A0;font-size: 28rpx;">请添加 <image class="addIcon" src="https://m.nocexpo.com/statics/js/modules/h5/img/icon20.png" /></view>
							
						</view>
						<view class="tagList">
							<view class="tag-item" v-for="item in useTagList">
								<view class="tag-text">{{item.tagName}}</view>
							</view>
						</view>
					</view>
					<!-- 上传资讯图片  -->
					<!-- <view class="newsImg">
						<view style="font-size:28rpx; font-weight: normal;color: #2E2D2D; font-family: PingFangSC-Regular, PingFangSC-Regular;">上传图片<text
								style="font-size: 13px; color: #A1A0A0;">(最多可上传4张图片))</text></view>
						<view class="img-list">
							<input type="file" style="display: none" ref="uploadImg"
								accept="image/gif, image/jpeg, image/jpg, image/png, image/svg" multiple id="uploadImg"
								class="uploadImg" @change="uploadImg()" />
							<image v-for="(item,index) in news.imgList" :src="item" class="img-item"
								@click="ifDeleteImg(index)" />
							<image class="addImg" src="../../../static/image/zhaopianfengmian.png" @click="clickUpload()" />
						</view>
					</view> -->
					<view class="newsImg">
						<view style="font-size:28rpx; font-weight: normal;color: #2E2D2D; font-family: PingFangSC-Regular, PingFangSC-Regular;">上传图片<text
								style="font-size: 13px; color: #A1A0A0;">(最多可上传4张图片))</text></view>
					<input type="file" style="display: none" ref="uploadImg"
							accept="image/gif, image/jpeg, image/jpg, image/png, image/svg" multiple id="uploadImg"
							class="uploadImg" @change="uploadImg()" />
					<view class="img-item-box">
						<image v-for="(item,index) in news.imgList" :src="item" class="img-item"
							@click="ifDeleteImg(index)" style="">
						<image src="../../../static/image/closeimage.png" class="caba"></image>
							</image>
						<image v-if="news.imgList.length<=3" class="addImg"
								:src="imgUrl + '/statics/js/modules/applet/img/zhaopianfengmian.png'" @click="clickUpload()" />
						</view>
					</view>
					
				</view>
					<!--  底部按钮  -->
				<view class="bottom">
					<view v-if="buttonSwitch" class="saveDraft" @click="saveDraft(news)">
						<!-- <image class="saveDraftImg" src="/static/image/saveDraft.png"/> -->
						<view class="caogao">存草稿</view>
					</view>
					<view v-if="buttonSwitch" class="uploadNewsButton" @click="issueNews(news)" :disabled="issue">
						<view class="uploadNewsText">发布</view>
					</view>
					<view v-else class="uploadNewsButton" @click="updateNews(news)" style="margin-left:0.6rem;">
						<view class="uploadNewsText">发布动态</view>
					</view>
				</view>
			</view>
				   <!-- 标签详情页 -->
			<view v-show="tagFlag" style="background-color: white;">
				<view style="padding-top: 0.3rem;">
					<view class="sort" style="padding-bottom:0rpx;">
						<view class="sort-ul">
							<view style=" width: 100%;font-size: 30rpx;margin-bottom: 38rpx; color: #2E2D2D; font-weight: 500;">已选标签(可以多选)</view>
							<view  v-if="useTagList.length==0" style="height: 200rpx;"></view>
							<view v-else>
								<view class="sort-li" v-for="item in useTagList">
									<view class="sort-aa" href="javascript:void(0);">{{'#'+ item.tagName}}
										<p style="display: inline-block;" @click="delTag(item)">X</p>
									</view>
								</view>
							</view>
						</view>
						<view v-if="tagList.length>0" >
							<view style=" border-top: 1px solid #dbdbdb; width: 506rpx;max-height: 350rpx;overflow-y: auto;height: 300rpx;">
								<view v-for="(item,i) in tagList" :key="item.id" style="width: 490rpx; height: 70rpx; padding-left: 14rpx;
							            background-color: #f5f5f5;line-height: 70rpx;" @click="useTagItem(item)">
									{{ item.tagName }}
								</view>
							</view>
						</view>
					</view>
					<view style="background-color: #f5f5f5; height: 2rpx;width: 90%; margin: 0 auto;"></view>
					<view style="display: block; ">
						<!-- <view style="margin-left: 30rpx;font-size: 30rpx;margin-top: 20rpx;">注：标签可以多选</view> -->
						<view class="sort" style="padding-top: 48rpx;display: block;">
							<view style="width: 100%;font-size: 30rpx;color: #2E2D2D; font-weight: 500;">推荐标签</view>
							<view class="sort-ul">
								<view class="sort-li" v-for="item in recomTagList">
									<view class="sort-a" :class="{active : index === ''}" href="javascript:void(0);"
										@click="userTag(item)">{{item.tagName}}</view>
								</view>
							</view>
						</view>
						<view style="display: flex; margin-top: 30rpx;">
							<input placeholder="自定义标签，不超过十个汉字" class="tagInput" v-model="tagName">
							<view class="tagAdd" @click="addTag">添加</view>
						</view>
					</view>
					<view style="padding-top: 6rem;padding-bottom: 0.5rem;display: flex; justify-content: center;">
						<view class="back" @click="tagFlag = false;newsFlag = true;" >返回</view>
						<view class="tagSave" @click="tagSelected()">确定</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import indexApi from '@/utils/request/index.js';
	import uploadApi from '@/api/uploadImgText.js';
	import commonApi from '@/utils/commonMethod.js';
	export default {
		data() {
			return {
				imgUrl: indexApi.baseUrl,
				news: {
					title: '', //资讯标题
					status: '', //状态,0-草稿,1-发布
					content: '', //资讯内容
					tags: [], //资讯标签列表
					imgList: [], //资讯图片列表
					tagList: [],

				}, //资讯
				currentUser: '',
				newsFlag: true,
				tagFlag: false,
				recomTagList: [],
				tagName: '',
				useTagList: [],
				tagList: [],
				addTagIsClick: true,
				//新增编辑流程
				newsId: 0,
				buttonSwitch: true,
				load: false,
				issue: true,
			}
		},
		watch: {
			tagName() {
				if (this.tagName) {
					commonApi.getTagList(this.tagName).then(res => {
						this.tagList = res.data.page.list
					})
				}
			}
		},
		async onLoad(options) {
			if (options.newsId != undefined) {
				this.buttonSwitch = false;
				this.newsId = options.newsId;
				await this.newsContent(this.newsId);
				
			}
			//获取当前用户
			const currentPromise = await commonApi.currentUserAxios()
			this.currentUser = currentPromise.data.session_user_h5
			this.news.userId = this.currentUser.id;
			//查询推荐标签
			this.getRecomTagList();
		},
		mounted() {
		},
		methods: {
			/**
			 * 触发上传图片按钮
			 */
			clickUpload() {
				uni.chooseImage({
					count: 8, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						var that = this
						//获取上传文件路径
						const tempFilePaths = res.tempFilePaths;
						//获取token, 上传时携带此参数，否则会被登录拦截掉
						let headers = {
							"token": uni.getStorageSync("authorize").token,
							cookie: uni.getStorageSync('cookie')
						};
						tempFilePaths.forEach((item, index, arr) => {
							//上传
							uni.uploadFile({
								url: 'https://m.nocexpo.com/sys/oss/upload',
								filePath: item,
								name: 'file',
								header: headers,
								success: (res) => {
									let result = JSON.parse(res.data)
									if (result.code == 0) {
										console.log(result.url);
										that.news.imgList.push(result.url)
									}
								}
							})
						})
						uni.showToast({
							title: "上传成功",
							icon: "success"
						})

					}.bind(this)
				});


			},
			//微信上传咨询图片
			tailorNewsImg(img, canvas, ctx) {
			},
			/**
			 * 是否删除图片
			 */
			ifDeleteImg(imgIndex) {

				uni.showModal({
					title: "",
					content: "是否删除该图片",
					showCancel: true,
					success: function(res) {
						var that = this
						if (res.confirm) {
							that.news.imgList.splice(imgIndex, 1)
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}.bind(this)
				});


			},
			/**
			 * 获取选择的文件并上传
			 */
			uploadImg(el) {
				let fileList = el.target.files;
				if (fileList.length > 4 || fileList.length + this.news.imgList.length > 4) {
					uni.showModal({
						title: "",
						content: "图片最多只能选4张！",
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return;
				}
				if (fileList.length > 0) {
					this.load = true;
				}
				Object.keys(fileList).forEach((value, index, array) => {
					//循环读取文件
					let fileReader = new FileReader();
					let img = new Image();
					fileReader.onload = (event) => {
						img.src = event.target.result
						img.onload = function() {
							// 旋转图片
							let newImage = rotateImage(img);
							newImage.name = fileList[value].name;
							console.log(fileList[value].size)
							let quality = 1
							if (fileList[value].size / 1024 > 1025) {
								quality = 0.7
							}
							
						};
					}
					fileReader.readAsDataURL(fileList[value]);
				})
			},

			/**
			 *保存为草稿
			 */
			async saveDraft() {
				// const result = await commonApi.judgeNocuserUserInfo()
				// if (!result) {
				// 	return;
				// }
				this.news.status = 0
				this.uploadNews(this.news)
			},
			/**
			 *正式发布
			 */
			async issueNews(news) {
				// const result = await commonApi.judgeNocuserUserInfo()
				// if (!result) {
				// 	return
				// }

				if (this.issue) {

					this.issue = false;
					this.news.status = 1
					this.news.ifLimit = 0

          await this.uploadNews(this.news)
				} else {
					console.log("已上传");
				}
			},
			/**
			 * 上传资讯
			 */
			async uploadNews(news) {
				var that = this
				if (that.news.content == null || that.news.content == '') {
					uni.showModal({
						title: "",
						content: "动态内容必须含有具体描述",
						showCancel: false,
						success: function(res) {
							console.log("弹窗");
							that.issue = true
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return
				}
				// 必须添加标题
				if (that.news.title == 0) {

					uni.showModal({
						title: "",
						content: "请添加标题",
						showCancel: false,
						success: function(res) {
						that.issue = true
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});

					return
				}
				if (that.news.title.length > 50) {

					uni.showModal({
						title: "",
						content: "标题字数不能超过50字",
						showCancel: false,
						success: function(res) {
							that.issue = true
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});

					return
				}
				that.news.tagList = that.useTagList;
				if (that.news.tagList.length == 0) {

					uni.showModal({
						title: "",
						content: "请选择标签",
						showCancel: false,
						success: function(res) {
							that.issue = true
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return;
				}
				if (that.news.imgList.length == 0) {
				
					uni.showModal({
						title: "",
						content: "请上传图片",
						showCancel: false,
						success: function(res) {
              that.issue = true
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return;
				}
        // var that = this
        uni.login({
          provider: 'weixin', //使用微信登录获取code
          success: function (loginRes) {
            //使用微信code获取openid
            commonApi.getOpenId(loginRes.code).then(res => {
              commonApi.msgSecCheck(that.news.title+that.news.content,2,res.data.openid).then(response =>{
                if(response.data.result.result.label == 100){
                  uploadApi.uploadNews(news).then(res => {
                    if (news.status == 0) {
                      uni.navigateTo({
                        url: '/pages/product/imageText/newsBuyers?index=2'
                      })
                    } else {
                      uni.navigateTo({
                        url: '/pages/product/imageText/newsBuyers?index=1'
                      })
                    }
                  })
                }else{
                  uni.showModal({
                    title: "提示",
                    content: "内容审核未通过",
                    showCancel:false,
                    success: function (res) {
                      that.news.title = ""
                      that.news.content = ""
                      if (res.confirm) {
                        console.log('用户点击确定');
                      } else if (res.cancel) {
                        console.log('用户点击取消');
                      }
                    }
                  });

                }
              })
            })
          }
        })

				let content = "";
				if (this.news.status == 0) {
					content = "动态已存入草稿";
				} else {
					content = "动态发布成功";
				}


			},
			selTag() {
				this.newsFlag = false;
				this.tagFlag = true;
			},
			tagSelected() {
				this.newsFlag = true;
				this.tagFlag = false;
			},
			getRecomTagList() {
				uploadApi.getRecomTagList().then(res => {
					this.recomTagList = res.data.page.list;
				})
			},
			addTag() {
				if (this.addTagIsClick) {
					this.addTagIsClick = false;
					this.tagName = this.tagName.trim()
					if (!this.tagName) {

						uni.showModal({
							title: "",
							content: "请填写标签名！",
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
						console.log("1");
						this.addTagIsClick = true;
						return;
					}
					if(!commonApi.testTagName(this.tagName)){
						uni.showModal({
							title: "",
							content: "标签含有字符或空格！",
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
						console.log("1");
						this.addTagIsClick = true;
						return;
					}
					uploadApi.saveTag(this.tagName).then(res => {
						console.log("2");
						if (res.data.code == 0) {

							uni.showModal({
								title: "",
								content: "添加成功",
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										console.log('用户点击确定');
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});


							let useItem = {
								id: res.data.nocTag.id,
								tagName: res.data.nocTag.tagName,
							}
							this.useTagList.push(useItem);
							this.tagName = '';
						} else {
							uni.showModal({
								title: "",
								content: res.data.msg,
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										console.log('用户点击确定');
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});

						}
						this.addTagIsClick = true;
					})
				}
			},
			userTag(tagInfo) {
				//校验是否已使用
				for (let i = 0; i < this.useTagList.length; i++) {
					if (this.useTagList[i].id == tagInfo.id) {


						uni.showModal({
							title: "",
							content: "标签已选择",
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});

						return;
					}
				}
				let useItem = {
					id: tagInfo.id,
					tagName: tagInfo.tagName,
				}
				this.useTagList.push(useItem);
			},
			useTagItem(tagInfo) {
				this.userTag(tagInfo);
				this.tagName = '';
				this.tagList = [];
			},
			delTag(tagInfo) {
				uni.showModal({
					title: "",
					content: "确定删除？",
					showCancel: true,
					success: function(res) {
						if (res.confirm) {
							var that = this
							for (let i = 0; i < that.useTagList.length; i++) {
								if (that.useTagList[i].id == tagInfo.id) {
									that.useTagList.splice(i, 1);
									break;
								}
							}
							console.log('用户点击确定');

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}.bind(this)
				});

			},
			//新增编辑流程
			async newsContent(id) {
				console.log("id");
				console.log(id);
				uploadApi.newsContent(id).then(res => {
					if (res.data.code == 0) {
						this.news.imgList = res.data.newsContent.nocNews.pictureUrl.split(",");
						this.news.title = res.data.newsContent.nocNews.title;
						this.news.content = res.data.newsContent.nocNews.content;
						this.useTagList = res.data.newsContent.tagList;

						uni.createSelectorQuery().select('.ql-container').context((res) => {
							this.editorCtx = res.context
							this.editorCtx.setContents({
								html: this.news
									.content //this.EditGoodsDetail.content为赋值内容。    
							})
						}).exec()

						// $('#summernote').summernote('code',this.news.content);
					}
				})
			},
			updateNews(news) {
				// this.news.content = $('#summernote').summernote('code');
				//必须上传图片
				if (news.imgList.length == 0) {
					uni.showModal({
						title: "",
						content: "请上传图片",
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});

					return
				}
				//必须添加标题
				if (news.title == 0) {
					uni.showModal({
						title: "",
						content: "请添加标题",
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});

					return
				}
				if (news.title.length > 50) {
					uni.showModal({
						title: "",
						content: "标题字数不能超过50字",
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});

					return
				}
				this.news.tagList = this.useTagList;
				if (this.news.tagList.length == 0) {
					uni.showModal({
						title: "",
						content: "请选择标签",
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});

					return;
				}
				let content = "发布成功";
				this.news.status = 1;
				this.news.ifLimit = 0;
				uploadApi.updateNews(this.newsId, news).then(res => {
					if (res.data.code == 0) {
						uni.navigateTo({
							url: '/pages/product/imageText/newsBuyers?index=1'
						})
						// window.location.href = "/h5/news/newsBuyers.html?index=1";
					}
				})
			},
		},
	}
</script>

<style>
	.img-item-box {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.caba {
		position: absolute;
		right: 0;
		top: 0;
		width: 28rpx;
		height: 28rpx;
		border-top-right-radius: 20rpx;
		background-color: #5F6066;
		color: #fff;
		text-align: center;
		line-height: 28rpx;
		font-size: 14rpx;
	}
	.img-item {
		border-radius: 20rpx;
		width: 155rpx;
		height: 155rpx;
		vertical-align: middle;
		margin: 10rpx;
	
		position: relative;
	}
	
	.uploadNews {
		background-color: white;
	}
	.newsImg {
		margin-top: 26rpx;
		padding: 0 32rpx;
	}
	.img-list {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}
	.img-item {
		border-radius: 20rpx;
		width: 150rpx;
		height: 150rpx;
		vertical-align: middle;
		/* margin: 50rpx; */
	}
	.addImg {
		border-radius: 20rpx;
		width: 150rpx;
		height: 150rpx;
		vertical-align: middle;
		margin: 10rpx;
	}
	.newsTitle {
		margin: 0.58rem 0rem 0rem 0rem;
		padding:0 32rpx;
	}
	.newsContent {
		margin: 50rpx 30rpx 50rpx 30rpx;
		border: 1px solid rgba(0, 0, 0, .2);
	}

	.addTag {
		padding: 0 32rpx;
		
		justify-content: space-between;
border-bottom: 2rpx solid #F7F7F7;
	}
	.title-input {
		border: 0rpx;
		font-size: 30rpx;
		font-family: PingFang;
		font-weight: 500rpx;
		line-height: 200rpx;
	}
	.title-input::placeholder {
		font-size: 0.4rem;
		font-family: PingFang;
		font-weight: 500;
		color: #909AA8;
		line-height: 0.51rem;
	}
	.separate {
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #999;
		margin: 0.1rem 0rem 0.4rem 0rem
	}
	.separate::after {
		content: '';
		flex: 1;
		height: 1px;
		background: #EBEBEB;
	}
	.news-content {
		width: 100%;
		height: 3.61rem;
		border: 0px;
		font-size: 0.37rem;
		font-family: PingFang;
		font-weight: 500;
		color: #8F9AA8;
		line-height: 0.51rem;
	}
	.addText {
		font-size: 28rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #333333;
		line-height: 80rpx;
		width: 300rpx;
	}
	.addIcon {
		width: 14rpx;
		height: 26rpx;
		margin-left: 12rpx;
		vertical-align: middle;
	}
	.tagList {
		justify-content: center;
		align-items: center;
	}
	.tag-item {
		display: inline-block;
		justify-content: center;
		align-items: center;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
		height: 30rpx;
		background-color: #E4F8F7;
		border-radius: 200rpx;
		padding: 10rpx 12rpx;
	}
	.tag-text {
		font-size: 24rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #00AAA6;
	}
	.bottom {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		bottom: 0.37rem;
		align-items: flex-end;
		height: 1.12rem;
		margin: 4rem 0rem 0.5rem 0.6rem;
	}
	.saveDraft {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 50rpx;
	}
	.saveDraftImg {
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 10rpx;
	}
	.uploadNewsButton {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 240rpx;
		height: 80rpx;
		background: linear-gradient(180deg, #54D6D2 0%, #00AAA6 100%);
		border-radius: 40rpx;
	}
	.caogao {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 240rpx;
		height: 80rpx;
		background: #F2F3F5;
		border-radius: 40rpx;
		color: #A1A0A0;
		font-size: 30rpx;
	}
	.uploadNewsText {
		font-size: 30rpx;
		font-family: PingFang;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 100rpx;
	}
	.sort {
		padding: 0 20rpx 0rpx 20rpx;
		background: #fff;
	}
	.recommend {
		font-size: 35rpx;
		color: #333333;
		margin-bottom: 32rpx;
		font: revert;
		font-weight: bold;
		margin-top: 60rpx;
	}
	.sort .sort-a {
		display: inline-block;
		padding: 16rpx;
		/* height: 70rpx; */
		color: #A1A0A0;
		line-height: 1;
		border: 2rpx solid #DCDCDC;
		border-radius: 35rpx;
	}
	.sort .sort-aa,
	.active {
		background-color: #E4F8F7;
		color: #00AAA6;
		padding: 16rpx;
		border-radius: 200rpx;
		line-height: 1;
	}
	.sort-ul {
		overflow: hidden;
		margin-top: 38rpx;
	}
	.sort-li {
		float: left;
		margin-right: 20rpx;
		padding: 8rpx 1rpx;
	}
	.sort-li-aa {
		background-color: #E4F8F7;
		color: #00AAA6;
		padding: 16rpx;
		border-radius: 200rpx;
		line-height: 1;
	}
	.sort-li-a {
		display: inline-block;
		padding: 16rpx;
		color: #A1A0A0;
		line-height: 1;
		border: 2rpx solid #DCDCDC;
		border-radius: 35rpx;
	}
	.tagInput {
		display: inline-block;
		border-radius: 35rpx;
		line-height: 70rpx;
		width: 524rpx;
		height: 68rpx;
		background-color: #f5f5f5;
		padding: 0 40rpx;
		margin-left: 20rpx;
		box-sizing: border-box;
	}
	.tagAdd {
		display: inline-block;
		margin-left: 20rpx;
		line-height: 68rpx;
		color: #FFFFFF;
		border-radius: 50rpx;
		text-align: center;
		font-size: 28rpx;
		width: 116rpx;
		height: 68rpx;
		background: linear-gradient(180deg, #54D6D2 0%, #00AAA6 100%);
		border-radius: 34rpx 34rpx 34rpx 34rpx;
	}
	.tagSave {
		margin: 0 auto;
		width: 	240rpx;
		height: 76rpx;
		background: linear-gradient(180deg, #54D6D2 0%, #00AAA6 100%);
		border-radius: 38rpx 38rpx 38rpx 38rpx;
		font-weight: 600;
		font-size: 28rpx;
		line-height: 76rpx;
		color: #FFFFFF;
		text-align: center;
		position: relative;
		right: 40rpx;
	}
	.back{
		margin: 0 auto;
		width: 240rpx;
		height: 76rpx;
		background:#F2F3F5 ;
		border-radius: 38rpx 38rpx 38rpx 38rpx;
		font-weight: 600;
		font-size: 28rpx;
		line-height: 76rpx;
		color:#A1A0A0;
		text-align: center;
		position: relative
	}
	.loader {
		position: relative;
		margin: 0 auto;
		width: 60px;
	}
	.loader:before {
		content: '';
		display: block;
		padding-top: 100%;
	}
	.circular {
		animation: rotate 2s linear infinite;
		height: 100%;
		transform-origin: center center;
		width: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	.path {
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
		animation: dash 1.5s ease-in-out infinite,
			color 6s ease-in-out infinite;
		stroke-linecap: round;
	}
	.editorIcon {
		height: 35rpx;
		width: 50rpx;
		text-align: center;
		background-color: aliceblue;
		margin: 10rpx 20rpx;
	}
	@keyframes rotate {
		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes dash {
		0% {
			stroke-dasharray: 1, 200;
			stroke-dashoffset: 0;
		}

		50% {
			stroke-dasharray: 89, 200;
			stroke-dashoffset: -35px;
		}

		100% {
			stroke-dasharray: 89, 200;
			stroke-dashoffset: -124px;
		}
	}

	@keyframes color {

		100%,
		0% {
			stroke: #45494a;
		}

		40% {
			stroke: #45494a;
		}

		66% {
			stroke: #45494a;
		}

		80%,
		90% {
			stroke: #45494a;
		}
	}

	body {
		background-color: #eee;
	}

	.showbox {
		width: 700px;
		height: 200px;
		position: fixed;
		left: 50%;
		top: 50%;
		z-index: 9999;
		/*设定这个div的margin-top的负值为自身的高度的一半,margin-left的值也是自身的宽度的一半的负值.*/
		/*宽为400,那么margin-top为-200px*/
		/*高为200那么margin-left为-100px;*/
		margin: -100px 0 0 -350px;
	}
</style>